<template>
    <div class="movie-card" :style="{ backgroundImage: `url(${movieData?.mov_pic})` }" @click="handlerClickCard">
        <div class="right">
            <div class="today">{{ movieData?.date.slice(6) }}</div>
            <div class="date">{{ movieData?.date.slice(0, 4) + "/" + movieData?.date.slice(4, 6) }}</div>
        </div>
        <div class="left">
            <div class="header">
                <span class="title">《{{ movieData?.mov_title }}》</span>
                <span class="rating"
                    ><span class="rating-text">豆瓣 {{ movieData?.mov_rating }}</span></span
                >
            </div>
            <div class="text">{{ movieData?.mov_text }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import router from "@/router";
    import { useHomeStore } from "@/store/home";
    import type { Movie } from "@/model/movie";

    const movieData = ref<Movie>();
    const bgcolor = ref();

    const movieStore = useHomeStore();

    const setMovieData = async () => {
        await movieStore.getMovieData();
        movieData.value = movieStore.movieData;
        bgcolor.value = "#" + movieData.value?.bgColor;
    };
    setMovieData();
    // 观察者模式获取数据，问题：没有响应式，进入详情页后再返回，数据就丢了
    // notifier.addObserver('movieData', (data: Movie) => {
    //   console.log(data)
    //   movieData.value = data
    //   bgcolor.value = '#' + data.bgColor
    // })

    const handlerClickCard = () => {
        router.push("/moviedetail");
    };
</script>

<style scoped>
    .movie-card {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        align-items: flex-end;
        background-position: center;
        background-size: cover;
        border-radius: 16px;
        color: white;
        cursor: pointer;
    }

    .movie-card::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 16px;
        background: linear-gradient(0deg, v-bind(bgcolor), rgba(0, 0, 0, 0));
    }

    .right {
        width: 66px;
        text-align: center;
        z-index: 111;
    }

    .right .today {
        line-height: 48px;
        font-size: 40px;
    }
    .right .date {
        font-size: 12px;
    }

    .left {
        flex: 1;
        font-size: 12px;
        z-index: 111;
        opacity: 0.9;
    }

    .left .header {
        height: 16px;
        margin-bottom: 5px;
    }

    .left .header .title {
        margin-left: -4px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .left .header {
        display: flex;
        align-items: center;
    }

    .left .header .rating {
        display: inline-block;
        font-weight: 500;
        background-color: #ffac2d;
        /*padding: 1px 2px;*/
        border-radius: 6px;
        color: #4f0e03;
        line-height: 12px;
    }
    .rating-text {
        display: inline-block;
        transform: scale(0.82);
    }

    .left .text {
        line-height: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
    }
</style>
